﻿<%@ Page Title="" Language="C#" MasterPageFile="~/_Index.Master" AutoEventWireup="true" CodeBehind="Products.aspx.cs" Inherits="WebApplication.Products" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="Content/Css/Products.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Container" runat="server">
    <div class="main-container">
        <%--面包屑导航--%>
        <div class="tplp-breadcrumb">
            <span class="layui-breadcrumb">
                <a href="/">首页</a>
                <a><cite>产品中心</cite></a>
            </span>
        </div>
        <div class="layui-row layui-col-space15 products-container">
            <%--折叠面板--%>
            <div class="layui-col-md3">
                <div class="layui-collapse">
                    <div class="layui-colla-item">
                        <h2 class="layui-colla-title">价格</h2>
                        <div class="layui-colla-content layui-show">
                            <div id="slideTest1"></div>
                            <div class="layui-row products-search__price">
                                <div class="layui-col-md5 text-center">
                                    <asp:TextBox runat="server" ID="SearchPriceMin" CssClass="products-search__price-input"></asp:TextBox>
                                </div>
                                <div class="layui-col-md2 text-center">to</div>
                                <div class="layui-col-md5 text-center">
                                    <asp:TextBox runat="server" ID="SearchPriceMax" CssClass="products-search__price-input"></asp:TextBox>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <%--产品中心--%>
            <div class="layui-col-md9">
                <%--列表--%>
                <section class="layui-row layui-col-space15 reward">
                    <asp:Repeater ID="ProductsList" runat="server">
                        <ItemTemplate>
                            <section class="layui-col-md4">
                                <a href="Detail.aspx?id=<%# Eval("ProductsID") %>">
                                    <div class="reward-details">
                                        <div class="reward-img">
                                            <img src="<%# Eval("Image") %>" />
                                        </div>
                                        <div class="reward-text">
                                            <p><%# Eval("ProductsName") %></p>
                                            <div class="flex-container" style="justify-content:space-between;">
                                                <span>¥<%# Eval("Price") %></span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </section>
                        </ItemTemplate>
                    </asp:Repeater>
                </section>
                <%--分页--%>
                <div id="layui-page" class="layui-page"></div>
            </div>
        </div>
    </div>
    <script>
        layui.use('slider', function () {
            var slider = layui.slider;
            //渲染
            slider.render({
                elem: '#slideTest1'  //绑定元素
                , min: <%=ProductsPriceMin %>
                , max: <%=ProductsPriceMax %>
                , range: true
                , value: [<%=CurrentPriceMin %>,<%=CurrentPriceMax %>]
                , change: debounce(function (value) {
                    const min = value[0];
                    const max = value[1];
                    <%--$('#<%=SearchPriceMin.ClientID %>').val(min);
                    $('#<%=SearchPriceMax.ClientID %>').val(max);--%>
                    let href = new URL(location.href);
                    href.searchParams.set('min', min);
                    href.searchParams.set('max', max);
                    location.href = href

                },200)
            });
        });

        layui.use('laypage', function () {
            var laypage = layui.laypage;

            //执行一个laypage实例
            laypage.render({
                elem: 'layui-page'
                , count: <%=PageTotal%>
                , limit: <%=PageSize%>
                , curr: <%=PageIndex%>
                , jump: function (obj,first) {
                    if (!first) {
                        let href = new URL(location.href);
                        href.searchParams.set('page', obj.curr);
                        location.href = href
                    }
                }
            });
        });

        $('#<%=SearchPriceMin.ClientID %>').change(function(){
            let min = parseInt($('#<%=SearchPriceMin.ClientID %>').val());
            let max = parseInt($('#<%=SearchPriceMax.ClientID %>').val());
            if(min > max || min < <%=ProductsPriceMin %>) {
                layer.alert(`请输入正确的价格区间(${<%=ProductsPriceMin %>}-${<%=ProductsPriceMax %>})!`, { icon: 0, title: '提示' });
            return;
        }
             let href = new URL(location.href);
        href.searchParams.set('min', min);
        location.href = href
        })

        $('#<%=SearchPriceMax.ClientID %>').change(function(e){
            let min = parseInt($('#<%=SearchPriceMin.ClientID %>').val());
            let max = parseInt($('#<%=SearchPriceMax.ClientID %>').val());
            console.log(max < min)
            if(max < min || max > <%=ProductsPriceMax %>) {
                layer.alert(`请输入正确的价格区间(${<%=ProductsPriceMin %>}-${<%=ProductsPriceMax %>})!`, { icon: 0, title: '提示' });
            return;
        }
             let href = new URL(location.href);
        href.searchParams.set('max', max);
        location.href = href
        })
    </script>

</asp:Content>
